﻿<h2>Hello I am a second view!</h2>
<div>This is the current title of my parent: {{title}}</div>
<div>As you see I can crawl up to use the scope of my parent controller.</div>
<div>But I have a scope of my own. Example: {{tab}}</div>
<br/>
<br/>
<div>Currently Searching: {{search}}</div>
<table class="table table-hover">
    <caption></caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Data</th>
            <th>Action</th>
               
        </tr>
        <tr>
            <th>
                <input type="text" ng-model="search.name" class="search-query" placeholder="Search" />
            </th>
            <th>
                <input type="text" ng-model="search.data" class="search-query" placeholder="Search" />
            </th>
            <th></th>
               
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in items | filter:search | orderBy:'name'| startFrom:currentPage*pageSize | limitTo:pageSize">
                
            <td>{{item.name}}</td>
            <td>{{item.data}}</td>
            <td class="btn btn-link"ng-click="clickMe(item)">Click</td>
                
        </tr>
    </tbody>
</table>
<button ng-disabled="currentPage == 0" ng-click="changePage(-1)">
        Previous
    </button>
    {{currentPage+1}}/{{numberOfPages()}}
    <button ng-disabled="currentPage >= items.length/pageSize - 1" ng-click="changePage(1)">
        Next
    </button>
<br/>
<br/>
<br/>
<br/>
<br/>